<template>
	<view class="pageContainer myBackground boxSizing" :style="{height: `${windowHeight}px`}">
		<view class="header d-flex a-center j-sb pl15 pr15">
			<view class="d-flex a-center">
				<view class="d-flex a-center">
					<image style="width: 96rpx; height: 96rpx;" mode="aspectFill" src="/static/img/home/logo.png"></image>
				</view>
				<view class="loginName ml10">{{userInfo.userName}}</view>
			</view>
		</view>
		<view class="home_body">
			<view class="mb10">
				<u-tabs :list="tabList" :current="current" lineColor="#3276FF" lineWidth="30" :activeStyle="{color: '#ffffff'}"
					:inactiveStyle="{color: '#ffffff'}" @change="tabsChange"></u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="transition">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<view v-for="(item,index) in isShowIndex" :key="index">
							<component :is="item" :ref="'myChildComponentOne'+index"></component>
						</view>
						<view style="height: 120rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p">
						<view v-for="(item,index) in isShowEchart" :key="index">
							<component :is="item" :ref="'myChildComponentTwo'+index"></component>
						</view>
						<view style="height: 120rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="warningCount" v-if="isShowDgIcon">
				<liuDragButton></liuDragButton>
			</view>
		</view>
		<tab-bar-view :tabCode="'0'"></tab-bar-view>

		<upVersion ref="isHome" :appText="appText" :upLoadUrl="upLoadUrl" :newVision="newVision" :appStoreUrl='appStoreUrl'>
		</upVersion>
	</view>
</template>

<script>
	import liuDragButton from "@/components/liu-drag-button/liu-drag-button.vue"
	import upVersion from "@/components/as-upVersion/as-upVersion.vue"


	import dormThreeBuildingOneFloorIndex from "./components/dormThreeBuildingOneFloor/index.vue"
	import dormThreeBuildingOneFloorEchart from "./components/dormThreeBuildingOneFloor/echarts.vue"
	import dormThreeBuildingTwoFloorIndex from "./components/dormThreeBuildingTwoFloor/index.vue"
	import dormThreeBuildingTwoFloorEchart from "./components/dormThreeBuildingTwoFloor/echarts.vue"
	import dormThreeBuildingThreeFloorIndex from "./components/dormThreeBuildingThreeFloor/index.vue"
	import dormThreeBuildingThreeFloorEchart from "./components/dormThreeBuildingThreeFloor/echarts.vue"
	import dormThreeBuildingFourFloorIndex from "./components/dormThreeBuildingFourFloor/index.vue"
	import dormThreeBuildingFourFloorEchart from "./components/dormThreeBuildingFourFloor/echarts.vue"
	import dormThreeBuildingFiveFloorIndex from "./components/dormThreeBuildingFiveFloor/index.vue"
	import dormThreeBuildingFiveFloorEchart from "./components/dormThreeBuildingFiveFloor/echarts.vue"

	import dormTwoBuildingOneFloorIndex from "./components/dormTwoBuildingOneFloor/index.vue"
	import dormTwoBuildingOneFloorEchart from "./components/dormTwoBuildingOneFloor/echarts.vue"
	import dormTwoBuildingTwoFloorIndex from "./components/dormTwoBuildingTwoFloor/index.vue"
	import dormTwoBuildingTwoFloorEchart from "./components/dormTwoBuildingTwoFloor/echarts.vue"
	import dormTwoBuildingThreeFloorIndex from "./components/dormTwoBuildingThreeFloor/index.vue"
	import dormTwoBuildingThreeFloorEchart from "./components/dormTwoBuildingThreeFloor/echarts.vue"
	import dormTwoBuildingFourFloorIndex from "./components/dormTwoBuildingFourFloor/index.vue"
	import dormTwoBuildingFourFloorEchart from "./components/dormTwoBuildingFourFloor/echarts.vue"
	import dormTwoBuildingFiveFloorIndex from "./components/dormTwoBuildingFiveFloor/index.vue"
	import dormTwoBuildingFiveFloorEchart from "./components/dormTwoBuildingFiveFloor/echarts.vue"

	import dormOneBuildingOneFloorIndex from "./components/dormOneBuildingOneFloor/index.vue"
	import dormOneBuildingOneFloorEchart from "./components/dormOneBuildingOneFloor/echarts.vue"
	import dormOneBuildingTwoFloorIndex from "./components/dormOneBuildingTwoFloor/index.vue"
	import dormOneBuildingTwoFloorEchart from "./components/dormOneBuildingTwoFloor/echarts.vue"
	import dormOneBuildingThreeFloorIndex from "./components/dormOneBuildingThreeFloor/index.vue"
	import dormOneBuildingThreeFloorEchart from "./components/dormOneBuildingThreeFloor/echarts.vue"
	import dormOneBuildingFourFloorIndex from "./components/dormOneBuildingFourFloor/index.vue"
	import dormOneBuildingFourFloorEchart from "./components/dormOneBuildingFourFloor/echarts.vue"
	import dormOneBuildingFiveFloorIndex from "./components/dormOneBuildingFiveFloor/index.vue"
	import dormOneBuildingFiveFloorEchart from "./components/dormOneBuildingFiveFloor/echarts.vue"

	import electricianIndex from "./components/electrician/index.vue"
	import electricianEchart from "./components/electrician/echarts.vue"

	import headmasterIndex from "./components/headmaster/index.vue"
	import {
		queryUserMenuByApp,
		queryHeadInfoByApp,
		queryNewVersion
	} from "@/api/index.js"

	export default {
		components: {
			liuDragButton,
			upVersion,
			dormThreeBuildingOneFloorIndex,
			dormThreeBuildingOneFloorEchart,
			dormThreeBuildingTwoFloorIndex,
			dormThreeBuildingTwoFloorEchart,
			dormThreeBuildingThreeFloorIndex,
			dormThreeBuildingThreeFloorEchart,
			dormThreeBuildingFourFloorIndex,
			dormThreeBuildingFourFloorEchart,
			dormThreeBuildingFiveFloorIndex,
			dormThreeBuildingFiveFloorEchart,
			dormTwoBuildingOneFloorIndex,
			dormTwoBuildingOneFloorEchart,
			dormTwoBuildingTwoFloorIndex,
			dormTwoBuildingTwoFloorEchart,
			dormTwoBuildingThreeFloorIndex,
			dormTwoBuildingThreeFloorEchart,
			dormTwoBuildingFourFloorIndex,
			dormTwoBuildingFourFloorEchart,
			dormTwoBuildingFiveFloorIndex,
			dormTwoBuildingFiveFloorEchart,
			dormOneBuildingOneFloorIndex,
			dormOneBuildingOneFloorEchart,
			dormOneBuildingTwoFloorIndex,
			dormOneBuildingTwoFloorEchart,
			dormOneBuildingThreeFloorIndex,
			dormOneBuildingThreeFloorEchart,
			dormOneBuildingFourFloorIndex,
			dormOneBuildingFourFloorEchart,
			dormOneBuildingFiveFloorIndex,
			dormOneBuildingFiveFloorEchart,
			electricianIndex,
			electricianEchart,
			headmasterIndex
		},
		data() {
			return {
				userInfo: {},
				pageInfo: {},
				isShowIndex: [],
				isShowEchart: [],

				deviceInfo: {
					allNumber: 0,
					onlineNumber: 0
				},
				background_img: uni.getStorageSync('setUrl'),

				swiperCurrent: 0,
				current: 0,
				tabList: [{
						name: '运行状态',
					},
					{
						name: '负载能耗'
					}
				],
				triggered: false,
				triggered2: false,

				bottom: 120,
				startY: 0, // 触摸开始的位置
				isMoving: false, // 是否正在拖动
				isShowDgIcon: false,


				appText: "", // 安卓下载链接
				upLoadUrl: "", // 安卓下载链接
				newVision: "", // 最新版本号
				appStoreUrl: '', // AppStore链接
			};
		},
		computed: {
			windowHeight() {
				console.log(uni.getSystemInfoSync(), '***');
				if (uni.getSystemInfoSync().windowBottom == 0) {
					return (uni.getSystemInfoSync().screenHeight)
				} else {
					return uni.getSystemInfoSync().screenHeight
				}
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo')
			this.userInfo = userInfo
			if ((userInfo.roleName.indexOf('校长') == -1) && (userInfo.roleName.indexOf('电工') == -1)) {
				this.isShowDgIcon = false
				this.queryUserMenuByApp()
			} else {
				if (userInfo.roleName.indexOf('校长') !== -1) {
					this.queryUserMenuByApp2('xz')
					this.isShowDgIcon = false
				} else {
					this.isShowDgIcon = true
					this.queryUserMenuByApp2('dg')
				}
			}
		},
		onShow() {
			for (var i = 0; i < this.isShowIndex.length; i++) {
				let ref = 'myChildComponentOne' + i
				let ref2 = 'myChildComponentTwo' + i

				this.$refs[ref][0].doRefresh()
				this.$refs[ref2][0].doRefresh()
			}

			// this.$refs.myChildComponentOne.setupTimer()
			// this.$refs.myChildComponentTwo.setupTimer();
		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
			this.updateApp()
		},
		onHide() {
			// 当页面隐藏时清除定时器
			// this.$refs.myChildComponentOne.clearTimer();
			// this.$refs.myChildComponentTwo.clearTimer();
		},
		methods: {
			updateApp() {
				// this.newVision = ""
				queryNewVersion({
					type: "Android"
				}).then(res => {
					let tempData = res.object
					console.log(tempData)
					// if (tempData.isNew == 'Y') {
					// this.uploadPopShow = true
					this.newVision = tempData.version
					this.appText = tempData.text
					this.appStoreUrl = tempData.url
					this.upLoadUrl = tempData.url
					// }
				})
			},

			async queryUserMenuByApp() {
				await queryUserMenuByApp({
					userCode: this.userInfo.userCode
				}).then(res => {
					let tempData = res.object
					let arr1 = []
					let arr2 = []
					for (var i = 0; i < tempData.length; i++) {
						if (tempData[i].activeMenu == 'home') {
							arr1.push(tempData[i])
						} else {
							arr2.push(tempData[i])
						}
					}

					this.pageInfo = arr1

					for (var i = 0; i < arr1.length; i++) {
						this.switchShowPage(arr1[i])
					}
					uni.setStorageSync('featureCenterData', arr2)
				})
			},

			queryUserMenuByApp2(type) {
				let arr1 = {
					activeMenu: "home",
					menuPath: type,
					menuTitle: "首页"
				}
				let arr2 = [{
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/863420244004174002.png",
					menuIcon: "http://36.138.43.18:8081/upload/885820244104174112.png",
					menuName: "运行数据",
					menuPath: "/pages/featureCenter/index2",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/560720244104174102.png",
					menuIcon: "http://36.138.43.18:8081/upload/885820244104174112.png",
					menuName: "设备控制",
					menuPath: "/pages/featureCenter/index2",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/706220244204174227.png",
					menuIcon: "http://36.138.43.18:8081/upload/177720244204174243.png",
					menuName: "故障记录",
					menuPath: "/pages/featureCenter/index2",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/044220244304174306.png",
					menuIcon: "http://36.138.43.18:8081/upload/291320244304174319.png",
					menuName: "负载分析",
					menuPath: "/pages/featureCenter/index2",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/210820244604174601.png",
					menuIcon: "http://36.138.43.18:8081/upload/941620244604174613.png",
					menuName: "能耗分析",
					menuPath: "/pages/featureCenter/index2",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/485720244404174403.png",
					menuIcon: "http://36.138.43.18:8081/upload/850420244404174432.png",
					menuName: "控制记录",
					menuPath: "/pages/featureCenter/index2",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/485720244404174403.png",
					menuIcon: "http://36.138.43.18:8081/upload/850420244404174432.png",
					menuName: "安全评估",
					menuPath: "/pages/featureCenter/children/safety",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/260720243306173325.png",
					menuIcon: "http://36.138.43.18:8081/upload/721920243306173332.png",
					menuName: "太阳能控制",
					menuPath: "/pages/featureCenter/children/solarEnergy",
				}, {
					activeMenu: type,
					createBy: "http://36.138.43.18:8081/upload/941220243206173202.png",
					menuIcon: "http://36.138.43.18:8081/upload/604320243206173210.png",
					menuName: "午休区控制",
					menuPath: "/pages/featureCenter/children/noonBreak",
				}]

				this.pageInfo = arr1
				this.switchShowPage(arr1)
				uni.setStorageSync('featureCenterData', arr2)
			},

			switchShowPage(data) {
				const _this = this
				switch (data.menuPath) {
					case '3-1':
						_this.isShowIndex.push('dormThreeBuildingOneFloorIndex')
						_this.isShowEchart.push('dormThreeBuildingOneFloorEchart')
						break;
					case '3-2':
						_this.isShowIndex.push('dormThreeBuildingTwoFloorIndex')
						_this.isShowEchart.push('dormThreeBuildingTwoFloorEchart')
						break;
					case '3-3':
						_this.isShowIndex.push('dormThreeBuildingThreeFloorIndex')
						_this.isShowEchart.push('dormThreeBuildingThreeFloorEchart')
						break;
					case '3-4':
						_this.isShowIndex.push('dormThreeBuildingFourFloorIndex')
						_this.isShowEchart.push('dormThreeBuildingFourFloorEchart')
						break;
					case '3-5':
						_this.isShowIndex.push('dormThreeBuildingFiveFloorIndex')
						_this.isShowEchart.push('dormThreeBuildingFiveFloorEchart')
						break;
					case '2-1':
						_this.isShowIndex.push('dormTwoBuildingOneFloorIndex')
						_this.isShowEchart.push('dormTwoBuildingOneFloorEchart')
						break;
					case '2-2':
						_this.isShowIndex.push('dormTwoBuildingTwoFloorIndex')
						_this.isShowEchart.push('dormTwoBuildingTwoFloorEchart')
						break;
					case '2-3':
						_this.isShowIndex.push('dormTwoBuildingThreeFloorIndex')
						_this.isShowEchart.push('dormTwoBuildingThreeFloorEchart')
						break;
					case '2-4':
						_this.isShowIndex.push('dormTwoBuildingFourFloorIndex')
						_this.isShowEchart.push('dormTwoBuildingFourFloorEchart')
						break;
					case '2-5':
						_this.isShowIndex.push('dormTwoBuildingFiveFloorIndex')
						_this.isShowEchart.push('dormTwoBuildingFiveFloorEchart')
						break;
					case '1-1':
						_this.isShowIndex.push('dormOneBuildingOneFloorIndex')
						_this.isShowEchart.push('dormOneBuildingOneFloorEchart')
						break;
					case '1-2':
						_this.isShowIndex.push('dormOneBuildingTwoFloorIndex')
						_this.isShowEchart.push('dormOneBuildingTwoFloorEchart')
						break;
					case '1-3':
						_this.isShowIndex.push('dormOneBuildingThreeFloorIndex')
						_this.isShowEchart.push('dormOneBuildingThreeFloorEchart')
						break;
					case '1-4':
						_this.isShowIndex.push('dormOneBuildingFourFloorIndex')
						_this.isShowEchart.push('dormOneBuildingFourFloorEchart')
						break;
					case '1-5':
						_this.isShowIndex.push('dormOneBuildingFiveFloorIndex')
						_this.isShowEchart.push('dormOneBuildingFiveFloorEchart')
						break;
					case 'dg':
						_this.isShowIndex.push('electricianIndex')
						_this.isShowEchart.push('electricianEchart')
						break;
					case 'xz':
						_this.isShowIndex.push('headmasterIndex')
						_this.isShowEchart.push('electricianEchart')
						break;
					default:
						// 如果 expression 不匹配任何 case 值，则执行 default 子句中的代码块
						break;
				}
			},

			async queryHeadInfoByApp() {
				await queryHeadInfoByApp({
					projectCode: this.userInfo.projectCode
				}).then(res => {
					let tempData = res.object
					this.deviceInfo = tempData
				})
			},

			onRefresh() {
				if (!this.triggered) {
					//下拉刷新，先变true再变false才能关闭
					this.triggered = true
					//关掉圈圈，需要先执行完刷新操作
				}
			},
			doRefresh() {
				this.$refs.myChildComponentOne.doRefresh()
				const that = this
				setTimeout(() => {
					that.triggered = false
				}, 1500)
			},

			// tabs通知swiper切换
			tabsChange(e) {
				this.current = e.index;
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
			},

			handleTouchMove(event) {

				this.isMoving = true;
				if (this.isMoving) {
					const touch = event.touches[0];
					const deltaY = touch.clientY - this.startY;
					this.bottom = this.bottom + deltaY;
					this.startY = touch.clientY;
					console.log(this.bottom);
					console.log(this.startY);
				}
			},
			handleTouchEnd() {
				this.isMoving = false;
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/floor.css");

	page {
		background-color: #f3f3f3;
	}

	.pageContainer {
		padding-top: calc(var(--status-bar-height) + 30rpx);
		box-sizing: border-box;
		font-family: Source Han Sans CN, Source Han Sans CN-500;
		// height: calc(100% - 20rpx);

		.header {
			.loginName {
				color: #ffffff;
				font-size: 32rpx;
			}

			.logout {
				background: #ffffff;
				border-radius: 68rpx;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.10);
				color: #999999;
				font-size: 24rpx;
				padding: 10rpx 18rpx;
			}
		}

		.deviceCountCard {
			background: rgba(73, 124, 255, 0.96);
			border-radius: 24rpx;
			padding: 40rpx 20rpx;

			.dCount {
				font-size: 28rpx;
				color: #ffffff;
				font-weight: 600;
			}

			.count {
				font-size: 96rpx;
				color: #ffffff;
				font-family: DIN, DIN-500;
				font-weight: 500;
			}

			.unit {
				font-size: 40rpx;
				color: #ffffff;
				font-weight: 600;
			}

		}

		.home_body {
			display: flex;
			flex-direction: column;
			height: calc(100% - 110rpx);

			::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
				display: flex;
				flex-direction: row;
				position: relative;
				justify-content: space-between;
			}

			::v-deep .u-tabs li,
			::v-deep .u-tabs a,
			::v-deep .u-tabs span {
				font-weight: bold;
			}

			//选中蓝色滑块对应
			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1 1 0% !important;
			}

			.swiper-box {
				flex: 1;
			}

			.swiper-item {
				height: 100%;
			}

			.warningCount {
				// bottom: 120rpx;
				// right: 0;
				// width: 100rpx;
				// height: 100rpx;
				background: #999999;
			}
		}
	}
</style>